<template>
    <div class="header">
        <h3>欢迎来到博客之家</h3>
        <div class="block">
            <el-avatar :size="50" :src="user.avatar"></el-avatar>
        </div>
        <div>{{user.username}}</div>
        <div class="item">
            <span><el-link type="primary" href="/">主页</el-link></span>
            <el-divider direction="vertical"></el-divider>
            <span><el-link href="/blog/add" type="success">发表</el-link></span>
            <el-divider direction="vertical"></el-divider>
            <span v-show="!flag"><el-link type="primary" href="/login">登录</el-link></span>
            <span v-show="flag"><el-link type="danger" @click="logout">退出</el-link></span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data() {
            return {
                user: {
                    username: '请先登录',
                    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                },
                flag: false
            }
        },
        methods: {
            logout() {
                const that = this
                that.$store.commit("REMOVE_INFO")
                that.$router.push("/login")
            }
        },
        created() {
            if (this.$store.getters.getUser.username) {
                this.user.username = this.$store.getters.getUser.username
                this.user.avatar = this.$store.getters.getUser.avatar
                this.flag = true
            }
        }
    }
</script>

<style scoped>
    .header {
        text-align: center;
    }

    .item {
        margin: 10px auto;
    }
</style>